<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <div class="tabs-box mar-t--10">
        <el-tabs v-model="tabActiveStatus" @tab-click="doChangeTab">
          <el-tab-pane :label="labels[1]" name="1"> </el-tab-pane>
          <el-tab-pane :label="labels[2]" name="2"> </el-tab-pane>
        </el-tabs>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate-default flex-col" style="align-items: baseline; padding: 20px; height: 100%; ">
        <div>
          <label>搜索订单：</label>
          <el-select v-model="textCol" class="width-120">
            <el-option label="订单号" value="orderNo"></el-option>
            <el-option label="平台订单号" value="externalOrderNo"></el-option>
            <el-option label="支付单号" value="payNo"></el-option>
            <el-option label="收货人" value="customerNickname"></el-option>
            <el-option label="收货人电话" value="customerPhone"></el-option>
          </el-select>
          <el-input class="width-200" v-model="textValue" placeholder="请输入内容"></el-input>

          <label class="mar-l-20">时间筛选：</label>
          <el-select class="width-120" v-model="timeCol" clearable>
            <el-option label="生成时间" value="createTime"></el-option>
            <el-option label="付款时间" value="payTime"></el-option>
            <el-option label="确认时间" value="confirmTime"></el-option>
          </el-select>
          <el-date-picker v-model="timeValue"
            class="width-200"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

          <label class="mar-l-20">平台类型：</label>
          <el-select v-model="defaultQuery.externalPlatformType" class="width-100" placeholder="平台类型" @change="changePlatformType">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(val, key) in dict.platformType" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <el-select v-model="defaultQuery.externalShopId" placeholder="店铺" class="width-160">
            <el-option v-for="(item, index) in shopList" :key="index" :label="item.shopName" :value="item.shopId"></el-option>
          </el-select>
        </div>
        <div class="mar-t-10">
          <label>订单状态：</label>
          <el-select v-model="defaultQuery.orderStatus" placeholder="订单状态" class="width-120">
            <el-option v-for="(val, key) in dict.orderStatus" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <label class="mar-l-20">订单类型：</label>
          <el-select class="width-140" v-model="defaultQuery.orderType" placeholder="订单类型" clearable>
            <template v-for="(val, key) in dict.orderType">
              <el-option v-if="key == '33' || key == '36'"  :key="key" :label="val" :value="key"></el-option>
            </template>
          </el-select>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="doResetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div>
        <div class="pad-t-15 pad-b-15 font-14 v-align-c">
          <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span class="mar-l-20">当页全选</span></el-checkbox>
          <span class="pad-l-4 pad-r-4">|</span>
          <div class="width-80">已选{{multipleSelection.length}}项</div>
          <el-button @click="doBatchPay" type="primary">批量支付</el-button>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column min-width="240px" label="订单信息" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p" @click="doLinkDetail(scope.row)">
                <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic cursor-p"></label>
                <div class="font-14 pad-l-10 line-2">
                  <span :title="scope.row.goodsTitle">{{ scope.row.goodsTitle }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="260px" label="订单号"  prop="externalOrderNo">
            <template slot-scope="scope">
              <div v-if="scope.row.externalOrderNo"><span class="font-color-9">平台单号：</span>{{(dict.platformType[scope.row.externalPlatformType]||'') + scope.row.externalOrderNo}}</div>
              <div><span class="font-color-9">订单号：</span>{{scope.row.orderNo}}</div>
            </template>
          </el-table-column>
          <el-table-column width="200px" label="支付单号" prop="payNo">
          </el-table-column>
          <el-table-column width="140px" label="授信方式" align="center">
            <template slot-scope="scope">
              {{ dict.creditType[scope.row.creditTypeSnapshot] }}
            </template>
          </el-table-column>
          <el-table-column width="140px" label="订单状态" align="center">
            <template slot-scope="scope">
              {{ dict.orderStatus[scope.row.orderStatus] }}
            </template>
          </el-table-column>
          <el-table-column width="150px" label="买家" >
            <template slot-scope="scope">
              <div v-if="scope.row.customerNickname">
                <div>{{scope.row.customerNickname}}</div>
                <div v-if="scope.row.customerPhone">{{scope.row.customerPhone}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="商品数量" >
            <template slot-scope="scope">
              <div v-if="scope.row.goodsNum">
                <div>{{scope.row.goodsNum}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="250px" label="时间">
            <template slot-scope="scope">
              <div><span class="font-color-9">生成时间：</span>{{scope.row.createTime}}</div>
              <div><span class="font-color-9">付款时间：</span>{{scope.row.payTime}}</div>
              <div><span class="font-color-9">确认时间：</span>{{scope.row.confirmTime}}</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="订单金额">
            <template slot-scope="scope">
              <div><span class="font-color-9">运费：</span>￥{{scope.row.freight}}</div>
              <div><span class="font-color-9">商品：</span>￥{{((scope.row.actualPrice||0)-(scope.row.freight||0)).toFixed(2)}}</div>
              <div><span class="font-color-9">合计：</span>￥{{scope.row.actualPrice||0}}</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="待付金额">
            <template slot-scope="scope">
              <div><span class="font-color-9">运费：</span>￥{{scope.row.orderFreightToThird}}</div>
              <div><span class="font-color-9">商品：</span>￥{{((scope.row.orderAmountToThird||0)-(scope.row.orderFreightToThird||0)).toFixed(2)}}</div>
              <div><span class="font-color-9">合计：</span>￥{{scope.row.orderAmountToThird||0}}</div>
            </template>
          </el-table-column>
          <el-table-column width="90px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" class="table-btn" @click="doLinkDetail(scope.row)">查看详情</el-button>
              <el-button type="text" size="medium" class="table-btn" v-if="!scope.row.payStatus" @click="doPay(scope.row)">支付</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 支付dialog -->
    <el-dialog title="支付中心" :visible.sync="orderPayVisible" width="700px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <order-pay :showFlag="orderPayVisible" :payOrderIds="payOrderIds" @doClose="doCloseOrderPay"></order-pay>
    </el-dialog>

  </div>
</template>

<script>
  import orderPay from '@/views/goods/order/components/order-pay'
  import { pagingCreditPayOrder, statCreditPayOrder } from '@/api/goods/order'
  import { listThirdShop } from '@/api/user/third-shop'
  import { getDictByGroupName } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    components: { orderPay },
    directives: {
      elDragDialog
    },
    data() {
      return {
        labels: {
          '1': '待付款(0)',
          '2': '待确认(0)'
        },
        // tab model
        tabActiveStatus: '1',
        // 文本model
        textCol: 'orderNo',
        textValue: '',
        // 时间model
        timeCol: 'createTime',
        timeValue: [],
        // 查询表单
        searchListQuery: {},
        // 默认查询表单
        defaultQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: '',
          memberId: '',
          orderTypes: '36,33',
          externalPlatformType: '',
          externalShopId: '',
          orderType: ''
        },
        // 数据字典
        dict: {
          orderType: {},
          platformType: {}
        },
        // 店铺集合
        shopList: [],
        // 支付订单id集合
        payOrderIds: [],
        listLoading: false,
        allChecked: false,
        orderPayVisible: false,
        total: 0,
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      getDictByGroupName('ThirdOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.initStat()
      this.initList()
    },
    methods: {
      // tab切换事件
      doChangeTab() {
        this.doResetSearch()
        this.initStat()
      },
      // 初始化
      initList() {
        this.setSearchListQuery()
        this.listLoading = true
        pagingCreditPayOrder(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
          Object.assign(this.dict, response.data.dict)
        })
      },
      // 统计
      initStat() {
        this.setSearchListQuery()
        statCreditPayOrder(this.searchListQuery).then(response => {
          if (response.isError) return
          this.labels[1] = '待付款(' + response.data[1] + ')'
          this.labels[2] = '待确认(' + response.data[2] + ')'
        })
      },
      // 搜索状态
      setSearchListQuery() {
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.memberId = this.getMemberId()
        this.searchListQuery.searchType = this.tabActiveStatus
        if (this.searchListQuery.orderType) {
          this.searchListQuery.orderTypes = ''
        } else {
          this.searchListQuery.orderTypes = '36,33'
        }
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.timeValue = originData.timeValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 跳转订单详情
      doLinkDetail(row) {
        this.$router.push({ path: '/order/order/detail/index', query: { orderId: row.orderId }})
      },
      // 批量支付事件
      doBatchPay() {
        if (this.multipleSelection.length <= 0) {
          this.$message.error('请选择要支付的订单')
          return
        }
        this.orderPayVisible = true
        this.payOrderIds = this.multipleSelection.map(item => item.orderId)
      },
      // 支付事件
      doPay(row) {
        this.orderPayVisible = true
        this.payOrderIds = [row.orderId]
      },
      // 关闭支付事件
      doCloseOrderPay(refreshFlag) {
        this.initList()
        this.orderPayVisible = false
      },
      changePlatformType() {
        const params = {
          enterpriseId: this.getEnterpriseId(),
          platformType: this.searchListQuery.externalPlatformType
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          this.shopList = response.data
        })
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.dataList.length) {
          this.dataList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.dataList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>